<template>
  <div class="fruit-view">
    <BaseBox>
      <template #title>
        <BaseTitle>水果百科</BaseTitle>
      </template>
      <template>
        <!-- 列表 -->
        <ul class="list-wrap">
          <li class="item" v-for="item in list" :key="item.id">
            <div class="info" @click="toDetail(item.id)">
              <img :src="item.icon" :key="item.id" alt="" />
              <p>{{ item.name }}</p>
            </div>
          </li>
        </ul>
      </template>
    </BaseBox>
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: "FruitView",
  data() {
    return {
      list: [],
    };
  },
  methods: {
    async getList() {
      const { data } = await axios({
        method: "GET",
        url: "https://autumnfish.cn/fruitApi/fruits",
      });
      if (data.status !== 200) return alert("获取数据失败!")
      this.list = data.data
    },
    toDetail(id) {
      this.$router.push({ path: '/detail', query: { id } })
    }
  },
  created() {
    this.getList()
  },
};
</script>

<style lang="less" scoped>
::v-deep .base-main {
  background-color: #fff;

}
.fruit-view {
  .list-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .item {
      cursor: pointer;
      .info {
        width: 10vw;
        margin: 0 calc(10vw - 9.6vw) calc(10vw - 9.6vw) 0;
        img {
          display: block;
          border: 2px solid yellowgreen;
          border-top-left-radius: 20px;
          border-bottom-right-radius: 20px;
          width: 100%;
          transition: 0.5s;
          &:hover {
            border-radius: 0;
            border-top-right-radius: 20px;
            border-bottom-left-radius: 20px;
          }
        }
        p {
          text-align: center;
          font-size: 13px;
        }
        &:hover {
          p {
            color: red;
          }
        }
      }
    }
  }
}
</style>
